<template>
	<view class="content">
		<view class="app-title ac flexTitle">
			<view class="fl" @click="back">
				<image class="back" src="/static/img/back.png"></image>
			</view>报警列表
			<view class="fl menu ac" @click="show_search = true">
				<view>
					<image class="select" src="/static/img/filter.png"></image>
				</view>
			</view>
		</view>

		<view class="my-work ac">
			<!--      <view class="fl menu ac"
        ><view :class="{ on: tab == 0 }" @click="setTab(0)"
          ><b>实时报警</b></view
        ></view
      >
      <view class="fl menu ac"
        ><view :class="{ on: tab == 1 }" @click="setTab(1)"
          ><b>历史报警</b></view
        ></view
      >
      <view class="fl menu ac" @click="show_search = true"
        ><view
          ><image class="select" src="/static/img/select.png"></image></view
      ></view> -->

			<view class="clearfix"></view>
		</view>
		<scroll-view scroll-y="true" class="scroll-Y" :scroll-top="scrollTop" :scroll-anchoring="true"
				:scroll-with-animation="false"  @scroll="scroll" @scrolltolower="lower">
			<view class="work-item">
				<view class="item" @click="jumpDetail(item)" v-for="(item, index) in list" :key="index">
					<view class="date">{{ item.startTimeStr}}
						<view class="fr">查看详情<image class="arrow" src="/static/img/arrow.png"></image>
						</view>
					</view>
					<view class="name"><b>{{ item.station }}{{ item.driveName }}</b></view>
					<view>
						<view class="f-opactiy">报警原因：</view>{{ item.content }}
					</view>
					<view>
						<view class="f-opactiy">恢复时间：</view>{{ item.restoreTime }}
					</view>
					<image v-show="item.handleflag == 0" src="/static/img/untreated.png" class="item-status"></image>
					<image v-show="item.handleflag == 1" src="/static/img/over.png" class="item-status"></image>
				</view>
				<!-- <view class="item" @click="jumpDetail">
				<view class="date">2021-08-06 12:37:09<text class="fr">查看详情<image class="arrow" src="/static/img/arrow.png"></image></text></view>
				<view class="name"><b>龙阳路站更换岔道</b></view>
				<view><text class="f-opactiy">报警原因：：</text>HMI故障或CATS通信中断</view>
				<view><text class="f-opactiy">恢复时间：：</text>2021-08-06 12:37:09</view>
				<image src="/static/img/over.png" class="item-status"></image>
			</view> -->
			</view>
		</scroll-view>
		<u-back-top @click.native="backTop" :scroll-top="old.scrollTop" :icon-style="iconStyle"
			:custom-style="customStyle"></u-back-top>
		<MyWorkSearch :title="line_name" :tab="tab" :restoreFlag="restoreFlag" :parentLevel="level" :parentStart="start"
			:parentEnd="end" v-show="show_search" @closeFull="closeFull"></MyWorkSearch>
	</view>
</template>

<script>
	// import MyWorkSearch from '../../components/myWork/myWorkSearch'
	import MyWorkSearch from "../../components/alarm/alarmListSearch.vue";
	import {
		ALARM_APP_CONTROLLER
	} from "../../api/alarm";
	export default {
		components: {
			MyWorkSearch
		},
		data() {
			return {
				scrollTop: 0,
				old: {
					scrollTop: 0,
				},
				line_name: "",
				tab: 0,
				start: this.getToday(),
				end: this.getToday(),
				level: "1,2",
				restoreFlag: "",
				handleFlag: "",
				maintainFlag: "",
				list: [],
				page: 0,
				flog: true,
				show_search: false,
				type: '',
				iconStyle: {
					color: "#fff",
				},
				customStyle: {
					backgroundColor: "#2979ff",
				},
			};
		},
		onLoad(options) {
			this.line_name = options.line;
			this.tab = options.tab;
			this.level = options.level;
			// this.handleFlag = options.handleFlag === '' ? 0 : options.handleFlag;
			// this.maintainFlag = options.maintainFlag === '' ? 0 : options.maintainFlag;
			this.restoreFlag = options.restoreFlag;
			this.start = options.start;
			this.end = options.end;
			this.type = options.type
			console.log("this.line_name", this.line_name)

		},
		onReachBottom() {
			if (!this.flog)
				return uni.showToast({
					title: "已无数据",
					icon: "none"
				});
			this.initList();
		},
		created() {
			this.setTab(this.type)
			// this.initList();
		},
		methods: {
			lower(){
				if (!this.flog)
					return uni.showToast({
						title: "已无数据",
						icon: "none"
					});
				this.initList();
			},
			backTop() {
				this.scrollTop = this.old.scrollTop;
				this.$nextTick(function() {
					this.scrollTop = 0;
				});
			
			},
			scroll(e) {
				this.old.scrollTop = e.detail.scrollTop;
			},
			back() {
				uni.navigateBack();
			},
			setTab(i) {
				this.page = 0;
				if (this.tab == i) return;
				this.tab = i;
				// this.start = this.getToday();
				// this.end = this.getToday();
				// this.list = [];
				// this.page = 1;
				// this.flog = true;
				// this.initList();
			},
			closeFull(obj) {
				if (obj) {
					this.start = obj.start.replace(/\//g, "-");
					this.end = obj.end.replace(/\//g, "-");
					this.level = obj.level;
					this.restoreFlag = obj.status;
					this.show_date = true;
					this.page = this.page && this.page - 1;
					this.flog = true;
					this.list = [];
					this.initList();
				}
				this.show_search = false;
			},
			jumpDetail(detail) {
				this.$store.state.alarmDetail = detail;
				uni.navigateTo({
					url: "/pages/alarm/alarmDetail",
				});
			},
			initList() {
				let obj = {
					line: this.line_name,
					start: this.start,
					end: this.end,
					levels: this.level,
					page: this.page,
					pagesize: 20,
				};
				if (this.tab == 1) {
					obj.handleFlag = this.handleFlag.toString();
					obj.maintainFlag = this.maintainFlag.toString();
					obj.restoreFlag = this.restoreFlag.toString();
				}
				if (this.tab == 0) {
					obj.restoreFlag = this.restoreFlag.toString();
				}
				this.fetch(
					"POST",
					this.baseUrl() + ALARM_APP_CONTROLLER.POST_LINE_ALARM_LIST,
					obj,
					true
				).then((res) => {
					if (res.returnCode == 2002) {
						this.list = this.list.concat(res.data.content.map(item => ({
							...item,
							restoreTime: item.restoreTime == "1970-01-01 08:00:00" ? "" : item
								.restoreTime
						})));
						console.log('as----', this.list)
						this.page++;
						if (this.page>res.data.totalPages) this.flog = false;
					}
				});
			},
		},
	};
</script>

<style scoped lang="less">
	.content{
		display: flex;
		flex-direction: column;
		height: 100vh;
	}
	.scroll-Y{
		flex: 1;
		height: 0;
	}
	.flexTitle {
		display: flex;
		flex-direction: row;
		align-content: center;
		justify-content: space-between;
		align-items: center;
	}

	.my-work {
		background: #fff;
		margin-bottom: 16px;
		box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.05);
	}

	.my-work>.menu {
		width: 37.5%;
		color: #3e3a39;
		line-height: 54px;
		position: relative;
	}

	.my-work>.menu:nth-child(3) {
		border-left: 1px solid #d7d7d7;
		width: 25%;
	}

	.my-work>.menu view {
		display: inline-block;
	}

	.my-work>.menu>.on {
		color: #307be0;
		border-bottom: 2px solid #307be0;
	}

	.my-work>.menu>.num {
		position: absolute;
		top: 10px;
		right: 20%;
		background: #fa5151;
		width: 15px;
		height: 15px;
		font-size: 10px;
		border-radius: 50%;
		color: #fff;
		line-height: 14px;
	}

	.select {
		width: 15px;
		height: 15px;
		margin-left: 5px;
		vertical-align: middle;
	}

	.work-item {
		width: 91.5%;
		margin: 0 auto;
	}

	.work-item>.item {
		background: #ffffff;
		box-shadow: -2px -2px 4px rgba(0, 0, 0, 0.05), 2px 2px 4px rgba(0, 0, 0, 0.05);
		border-radius: 6px;
		padding: 0 0 16px 16px;
		font-size: 14px;
		margin-bottom: 16px;
		color: #3e3a39;
		position: relative;
	}

	.work-item>.item>.name {
		margin-bottom: 10px;
	}

	.work-item>.item>view:nth-child(3) {
		margin-bottom: 6px;
	}

	.work-item>.item>.item-status {
		position: absolute;
		width: 60px;
		height: 60px;
		right: 0;
		bottom: 16px;
	}

	.work-item>.item>.date {
		line-height: 46px;
		font-size: 14px;
		border-bottom: 1px solid #f1f1f1;
		padding-right: 20px;
		margin-bottom: 10px;
	}

	.arrow {
		width: 7px;
		height: 12px;
		margin-left: 7px;
		vertical-align: middle;
	}

	.f-opactiy {
		display: inline-block;
	}
</style>